<template>

  <div>
    <!-- 筛选区域 -->
    <div class="query-form">

      <!-- <cb-organ-select action="/crec-authority-web/v1/user/getUserTree" /> -->
      <!-- 注意：使用的crec-form-model 而不是crec-form组件，否则无法使用ref去校验重置等 -->
      <crec-form-model ref="gQueryFormRef" layout="inline" :model="gQueryData" @finish="gSearchCancel">
        <crec-form-model-item label="姓名" >
          <crec-input allowClear v-model.trim="gQueryData.name" placeholder="请输入姓名"></crec-input>
        </crec-form-model-item>

        <crec-form-model-item label="手机号" >
          <crec-input allowClear v-model.number="gQueryData.phone" placeholder="请输入手机号"></crec-input>
        </crec-form-model-item>

        <crec-form-model-item label="性别" >
          <crec-select allowClear style="width: 183px;" v-model="gQueryData.sex" placeholder="请选择性别">
            <crec-select-option :value="1">男</crec-select-option>
            <crec-select-option :value="2">女</crec-select-option>
            <crec-select-option :value="3">其他</crec-select-option>
          </crec-select>
        </crec-form-model-item>
        <crec-form-model-item label="年龄" >
          <crec-input allowClear v-model.number="gQueryData.age" placeholder="请输入年龄"></crec-input>
        </crec-form-model-item>
        <crec-form-model-item label="状态" >
          <crec-select allowClear style="width: 183px;" v-model="gQueryData.state" placeholder="请选择性别">
            <crec-select-option :value="1">启用</crec-select-option>
            <crec-select-option :value="2">禁用</crec-select-option>
          </crec-select>
        </crec-form-model-item>
        <crec-form-model-item label="" >
          <crec-space >
            <crec-button @click="gSearchCancel">重置</crec-button>
            <crec-button type="primary" html-type="submit" @click="gSearchCofnirm">查询</crec-button>
          </crec-space>
        </crec-form-model-item>
      </crec-form-model>
    </div>
    <div class="content-form">
      <!-- 按钮区 -->
      <vxe-toolbar
        class-name="toolbar"
        ref="gToolbarRef"
        :tools="[{icon:'vxe-icon-download',type:'button',circle:true,code:'export'}]"
        :custom="{immediate:true}"
        :refresh="{ queryMethod:gInitData}"
        @tool-click="gToolTick">
        <crec-space slot="buttons">
          <crec-button type="primary" @click="gModalShow=true">新增</crec-button>
          <crec-button type="primary" @click="gEditRow(gSelectData)">修改</crec-button>
          <crec-button type="primary" @click="gImportShow=true">导入</crec-button>
          <crec-button ghost @click="gDeleteRow" type="danger">删除</crec-button>
        </crec-space>
      </vxe-toolbar>
      <!-- 表格区 -->
      <!-- 文档地址：https://vxetable.cn/v3.8/#/table/start/install -->
      <!-- 除了主界面用vxe-table 其他都有应有的组件 -->
      <vxe-table
        show-overflow
        ref="gTableRef"
        @checkbox-change="gCheckboxChange"
        @checkbox-all="gCheckboxAllChange"
        @cell-dblclick="gCellDblclick"
        :loading="gLoading"
        border="full"
        :data="gTableData">
        <vxe-column type="checkbox" align="center" width="60"></vxe-column>
        <vxe-column field="name" title="姓名" width="200"></vxe-column>
        <vxe-column field="phone" title="手机号" width="200"></vxe-column>
        <vxe-column field="age" title="年龄" width="200"></vxe-column>
        <vxe-column field="sex" title="性别" width="200"></vxe-column>
        <vxe-column field="entryDate" title="入学日期" width="200"></vxe-column>
        <vxe-column field="love" title="爱好" width="200"></vxe-column>
        <vxe-column field="state" title="状态" width="200" ></vxe-column>
        <vxe-column field="address" title="家庭住址" width="320"></vxe-column>
        <vxe-column title="操作" align="center" width="160" fixed="right">
          <template #default="{ row }">
            <crec-button type="link" @click="gEditRow(row)">修改</crec-button>
            <crec-button type="link" @click="gDeleteRow(row)">删除</crec-button>
          </template>
        </vxe-column>
      </vxe-table>
      <!-- 分页区 -->
      <crec-row type="flex" justify="end">
        <crec-pagination
          class="mt-10"
          :show-total="total => `共 ${total} 条`"
          show-quick-jumper
          show-size-changer
          show-less-items
          :page-size-options="gPageSizeOptions"
          :total="gTotal"
          @change="gPageChange"
          @showSizeChange="gPageChange"
          v-model="gPageData.pageNum"
          :pageSize.sync="gPageData.pageSize" />
      </crec-row>
    </div>

    <!-- 新增、修改、查看 弹框 -->
    <edit v-model="gModalShow" ref="gEdit" :width="gMaxDialogWidth" @refreshList="gInitData" />

    <!-- 导入弹框 -->
    <excel-upload v-model="gImportShow" @refreshList="gInitData" />

  </div>

</template>

<script>
import { listAndDel } from '@@/mixins/crud/index'
import ExcelUpload from '@@/components/ExcelUpload/index.vue'
import { getListUserApi, delUserApi } from '@@/api/demo'
import edit from './edit'
export default {
  mixins: [listAndDel],
  components: { edit, ExcelUpload },
  data () {
    return {
      // 表格查询参数
      gQueryData: {
        name: ''
      },
      // 列表请求相关配置
      listConfig: {
        beforeRequestFn: this.beforeLoadFn,
        afterRequestFn: this.afterLoadFn,
        apiFn: getListUserApi
      },
      // 删除请求相关配置
      delConfig: {
        // keyName: 'id',
        apiFn: delUserApi,
        beforeRequestFn: this.beforeDelLoadFn,
        afterRequestFn: this.afterDelLoadFn
      }
    }
  },

  created () {
  },
  methods: {
    /**
     * 列表请求前执行函数(加工提交的参数)
     * @param {object} requestData 列表请求提交的数据
     * @returns {object} 处理后的查询参数条件
     */
    beforeLoadFn (requestData) {
      console.log('请求之前', requestData)
      return {
        ...requestData,
        t: Date.now()
      }
    },
    /**
     * 列表请求回来之后执行函数(加工返回的参数)
     * @param {*} responeData
     */
    afterLoadFn (responeData) {
      console.log('后端返回的数据', responeData)
      return { ...responeData }
    },
    /**
      * 删除之后的回调函数
      * @param {*} requestData 要提交的数据
      * @param {*} data  选中的数据或点击的数据
      */
    beforeDelLoadFn (requestData, data) {
      console.log('删除之前', requestData, data)
      return requestData
    },
    /**
     * 删除之后的回调函数
     * @param {*} responeData 删除请求返回的数据
     */
    afterDelLoadFn (responeData) {
      console.log('删除之后', responeData)
    }
  }
}
</script>

<style lang="less" scoped></style>
